<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .login_info {
            margin-top: 0;
            color: #e85759;
            display: none;
        }

        .login_info i {
            color: #e85759;
            transform: translateY(-5px);
        }

        .info_text {
            height: 24px;
            padding: 2px 28px;
        }

        .active {
            display: block;
        }

        #info_msg {
            color: #3F94EF;
        }

        #info_msg i {
            color: #3F94EF;
        }
    </style>
</head>

<body>
    <div class="main">
        <h2>登录</h2>
        <div class="center">
            <div class="username login_input">
                <i class="fa fa-user fa-lg"></i>
                <input id="phoneNumber" class="input_text" type="text" name="username" placeholder="手机号">
            </div>
            <div class="login_input login_info" id="phone_info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="phone_info"></p>
            </div>
            <div class="username login_input">
                <i class="fa fa-lock fa-lg"></i>
                <input id="password" class="input_text" type="password" name="password" placeholder="密码">
            </div>
            <div class="login_input login_info" id="pwd_info_msg">
                <i class="fa fa-exclamation-circle fa-fw"></i>
                <p class="info_text" id="pwd_info"></p>
            </div>
            <div class="username login_input">
                <input id="js_btn" class="btn_login" type="submit" name="submit" value="登 录">
                <div class="login_input login_info" id="info_msg">
                    <i class="fa fa-exclamation-circle fa-fw"></i>
                    <p class="info_text" id="info"></p>
                </div>
                <div class="account_oprate clearfix">
                    <a href="/" class="left">找回用户名</a>
                    <a href="/" class="left">找回密码</a>
                    <a href="./register.html" class="right">注册</a>
                </div>
            </div>
        </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/jquery.cookie.js"></script>
    <script>
        var phoneNumbers = {"13266668888":"12345678", "13566668888":"12345678", "13666668888":"12345678"};

        $("#js_btn").on("click", function () {
            var phoneNumber = $("#phoneNumber").val();
            var password = $("#password").val();

            var phone_flag = false;
            var pwd_flag = false;

            if (phoneNumber.length == 0) {
                $("#phone_info_msg").addClass("active");
                $("#phone_info").text("手机号不能为空");
            } else if (/^[0-9][0-9]{10}$/.test(phoneNumber) == false) {
                $("#phone_info_msg").addClass("active");
                $("#phone_info").text("手机号格式不正确");
            } else if (Object.keys(phoneNumbers).includes(phoneNumber) || Object.keys($.cookie()).indexOf(
                phoneNumber) != -1) {
                $("#phone_info_msg").removeClass("active");
                $("#phone_info").text("");
                phone_flag = true
            }

            if (phone_flag) {
                if(password.length == 0) {
                    $("#pwd_info_msg").addClass("active");
                        $("#pwd_info").text("密码不能为空");
                }else {
                    if (password != $.cookie()[phoneNumber] && phoneNumbers[phoneNumber] != password) {
                        $("#pwd_info_msg").addClass("active");
                        $("#pwd_info").text("手机号或密码错误");
                    } else if(password == $.cookie()[phoneNumber] || phoneNumbers[phoneNumber] == password) {
                        pwd_flag = true;
                        $("#pwd_info_msg").removeClass("active");
                        $("#pwd_info").text("");
                    }
                }                
            } else {
                $("#pwd_info_msg").addClass("active");
                if(password.length == 0){
                    $("#pwd_info").text("密码不能为空");
                }else {
                    $("#pwd_info").text("手机号或密码错误");
                }                
            }

            if (phone_flag && pwd_flag) {
                $("#info_msg").addClass("active");
                $("#info").text("登录成功");

                setTimeout(function () {
                    $(location).attr('href', '../index.html');
                }, 1000);
            }
        });
    </script>
</body>

</html>